<!--菜单编辑和修改-->
<template>
  <el-form ref="formData" :model="formData" label-width="80px">
    <el-form-item label="菜单名称">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="菜单路径">
      <el-input v-model="formData.interfaceUrl"></el-input>
    </el-form-item>
    <el-form-item label="上级菜单">
      <el-select v-model="formData.parentId" placeholder="请选择活动区域">
        <el-option label="顶级菜单" :value="0"></el-option>
        <el-option
            v-for="menu in topMenus"
            :label="menu.name"
            :value="menu.id"
            :key="menu.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="菜单类型">
      <el-input v-model="formData.type"></el-input>
    </el-form-item>
    <el-form-item label="图标">
      <el-input v-model="formData.icon"></el-input>
    </el-form-item>
    <el-form-item label="权限标识符">
      <el-input v-model="formData.perms"></el-input>
    </el-form-item>
    <el-form-item label="是否展示">
      <el-radio-group v-model="formData.visible">
        <el-radio :label="true">是</el-radio>
        <el-radio :label="false">否</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即{{msg}}</el-button>
      <el-button @click="onEditCreateCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>


<script>
import {getAllMenus, createMenu, updateMenu, getByIdMenu} from "@/api/menu/menu.js";


export default {
  name: "MenuCreateOrEdit",
  data() {
    return {
      isCreate: true,
      xMenuPageBo: {
        name: '',
        startTime: '',
        endTime: '',
        pageSize: 1,
        pageNum: 10
      },
      formData: {
        id: '',
        name: '',
        interfaceUrl: '',
        parentId: 0,
        visible: true,
        type: '',
        perms: '',
        icon: '',
      },
      topMenus: []
    }
  },
  created() {
    //获取顶级菜单
    this.loadMenus()
    console.log(this.$route.params.id)
    //this.$route.params.id
    //this.$route.params.id 为undefined 就是false
    this.isCreate = !this.$route.params.id
    console.log("this.isCreate ", this.isCreate);
    //是否为创建:true,非创建为false
    if (!this.isCreate) {
      this.gainMenuInfo()
    }
  },
  computed: {
    msg() {
      return this.isCreate ? "添加" : "更新"
    }
  },
  methods: {
    onSubmit() {
      //debugger
      console.log(`${this.msg}菜单：：：：：：!`);
      var newData = [];
      newData = this.formData;
      //console.log("newData", newData);
      //编辑菜单
      newData.visible === true ? newData.visible = 1 : newData.visible = 0;
      if (!this.isCreate) {
        updateMenu(newData).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(`${this.msg}菜单成功!`)
            this.$router.push({name: 'menu'})
          } else {
            this.$message.error(`${this.msg}菜单失败!`)
          }
          //console.log(res);
        })
      } else {
        createMenu(newData).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(`${this.msg}菜单成功!`)
            this.$router.push({name: 'menu'})
          } else {
            this.$message.error(`${this.msg}菜单失败!`)
          }
          console.log(res);
        })
      }

    },
    onEditCreateCancel() {
      console.log('取消添加菜单：：：：：：!');
      this.$router.push({name: 'menu'})
    },
    loadMenus() {
      getAllMenus(this.xMenuPageBo).then((res) => {
        //debugger
        console.log(res);
        if (res.data.code === '200') {
          //查询出来顶级菜单
          this.topMenus = res.data.data.rows.filter((item) => item.parentId === 0);
        } else {
          this.$message.error(`${this.msg}菜单时,获取所有菜单失败!`)
        }
        console.log(res)
      })
    },
    gainMenuInfo() {
      //this.$route.params.id
      //解构对象 id可以默认为-1,可以去得到this.$route.params的里面的id值
      const {id = -1} = this.$route.params
      getByIdMenu(id).then((res) => {
        //debugger
        console.log("菜单详情查询::::::::::::", res);
        if (res.data.code === '200') {
          res.data.data.visible === "1" ? res.data.data.visible = true : res.data.data.visible = false;
          let newData = res.data.data;
          // this.formData = newData;
          //赋值第二个参数赋给第一个参数对象中的值
          Object.assign(this.formData,newData)
        } else {
          this.$message.error('回显菜单失败!')
        }
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>
.el-form {
  padding: 70px;
  background-color: #fff;
}
</style>
